<template>
  <div class="login">
    <div>
      <a-card
        style="width: 700px; background: rgba(255, 255, 255, 0.1)"
        :bordered="false"
      >
        <!-- //标题 -->
        <h2 class="title">登录后台</h2>
        <!-- 表单 -->
        <div class="form">
          <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            v-bind="layout"
          >
            <a-form-model-item ref="name" label="账号" prop="name">
              <a-input
                placeholder="admin"
                v-model="ruleForm.name"
                @blur="
                  () => {
                    $refs.name.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
            <a-form-model-item label="密码" prop="pass">
              <a-input
                placeholder="123456"
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
              />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 7 }">
              <a-button type="primary" @click="submitForm('ruleForm')">
                Submit
              </a-button>
              <a-button
                style="margin-left: 10px"
                @click="resetForm('ruleForm')"
              >
                Reset
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-card>
    </div>
  </div>
</template>
  </div>
</template>

<script>
import { reqLogin } from "@/api";
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: "admin",
        checkPass: "123456",
      },
      rules: {
        name: [
          { message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        pass: [
          { message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    };
  },

  methods: {
    async submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          console.log("error submit!!");
          this.$error({
            title: "失败提示",
            content: "请输入符合检验规则的账号密码",
          });
          return;
        }
      });
      let form = {};
      form.username = this.ruleForm.name;
      form.password = this.ruleForm.checkPass;
      const res = await reqLogin(form);
      if (res.meta.status != 200) {
        this.$error({
          title: "失败提示",
          content: "请输入正确的账号或者密码",
        });
        return;
      }
      window.sessionStorage.setItem("token", res.data.token);
      this.getMycount();
      this.openNotification();
      this.$router.push("/home");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getMycount() {
      let date = new Date();

      if (date.getHours() >= 0 && date.getHours() < 12) {
        this.$message.success("上午好 欢迎回来 ！");
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        this.$message.success("下午好 欢迎回来 ！");
      } else {
        this.$message.success("晚上好 欢迎回来 ！");
      }
    },
    openNotification() {
      this.$notification.open({
        style: {
          backgroundColor: '#66CDAA',
        },
        top: "60px",
        message: "更新提示",
        description:
          "优化高级别管理者向底权限管理者分配权限，优化上传图片可预览效果，添加一次性图片上传的个数.",
        onClick: () => {
          console.log("Notification Clicked!");
        },
      });
    },
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(./123.jpg) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.title {
  font-weight: 600;
  letter-spacing: 5px;
  text-align: center;
  color: aqua;
  padding-bottom: 30px;
}
.form {
  padding-left: 80px;
}
</style>